import React, {Component} from 'react';
import {Button, Form, Row, Col,} from 'antd';
import {Consumer, Provider} from "../store";
import {config} from "../config";
import {Route,Switch} from 'react-router-dom';
import orderStatistic from './orderStatistic';
import orderTakeout from './orderTakeout';
import orderInStore from './orderInStore';
import orderAppointment from './orderAppointment';
import '../css/orderManage.css';

class storageManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            routeList: [
                {path: '/index/orderManage/orderStatistic', component: orderStatistic},
                {path: '/index/orderManage/orderTakeout', component: orderTakeout},
                {path: '/index/orderManage/orderInStore', component: orderInStore},
                {path: '/index/orderManage/orderAppointment', component: orderAppointment},
            ],
            currentMenu:1
        }
    };

    render() {
        const {currentMenu}=this.state;
        const platForm=config.path;
        return (
            <div className="orderManage">
                <div className="orderManageHeader"></div>
                <div className="orderManageContainer">
                    <div className="orderManageContainerLeft">
                        <div className={`orderManageMenuItem ${currentMenu==1?'active':''}`} onClick={()=>this.handleClickOnMenuChange(1,'/index/orderManage/orderStatistic')}>
                            订单统计
                        </div>
                        <div className={`orderManageMenuItem ${currentMenu==2?'active':''}`} onClick={()=>this.handleClickOnMenuChange(2,'/index/orderManage/orderTakeout')}>
                            外卖订单
                        </div>
                        <div className={`orderManageMenuItem ${currentMenu==3?'active':''}`} onClick={()=>this.handleClickOnMenuChange(3,'/index/orderManage/orderInStore')}>
                            店内订单
                        </div>
                        <div className={`orderManageMenuItem ${currentMenu==4?'active':''}`} onClick={()=>this.handleClickOnMenuChange(4,'/index/orderManage/orderAppointment')}>
                            预约订单
                        </div>
                    </div>
                    <div className="orderManageContainerRight">
                        <Switch>
                            {
                                this.state.routeList.map((item,index)=>{
                                    return(
                                        <Route key={index} path={item.path} component={item.component}/>
                                    )
                                })
                            }
                        </Switch>
                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;//获取订单管理的上下文状态
        dispatch({menuType: "订单管理"});
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 处理菜单跳转事件
     */
    handleClickOnMenuChange(index,path){
        this.setState({currentMenu:index});
        this.props.history.push(path);
    }

};
const StorageManages = Form.create()(storageManage);
export default prop => (
    <Consumer>
        {
            props => (
                <StorageManages {...prop} {...props} />
            )
        }
    </Consumer>
);